<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <title>年度城市-点位看板</title>
        <link rel="stylesheet" href="../../library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
        <link rel="stylesheet" href="../../css/common.css">
        <script src="../../library/jquery/jquery-1.11.3.js"></script>
        <script src="../../library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <style>
            .selectAccess .ui-checkbox{
                display: block;
            }
        </style>
    </head>
<body>
    <!--主页面-->
    <div data-role="page" id="pageone">
        <div data-role="header" data-theme="a" data-position="fixed">
            <a href="index.html" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-transition="slide" data-direction="reverse"><</a>
            <h2>城市-点位看板</h2>
        </div>
        <div data-role="main" class="ui-content">
            <div data-role="navbar">
                <ul class="navbar" id="selMain">
                    <li><a href="#" class="ui-btn-active" tag="sale_amount" @click="startdraw('bar')">柱状图</a></li>
                    <li><a href="#" tag="sku_sum" @click="startdraw('cluster')">簇状图</a></li>
                </ul>
                <h5 style="text-align:center;background:#f6f6f6;padding:5px 0;">{{lab}}</h5>
            </div>
            <div id="citydrillChart" class="draw"></div>
        </div>
    </div>
   <script src="../../library/Highcharts-6.0.3/highcharts.js"></script>
    <script src="../../library/Highcharts-6.0.3/modules/exporting.js"></script>
    <script src="../../library/Highcharts-6.0.3/modules/offline-exporting.js"></script>
    <script src="../../library/vue/vue.js"></script>
    <script src="../../library/vue/vue-resource.js"></script>
    <script src="../../js/userId.js"></script>
    <script src="../../controller/drawStack.js"></script>
    <script src="../../controller/drawCluster.js"></script>
    <script>
        $(document).ready(function(){
            //获取浏览器地址中的参数
            var url=window.location.href;
            var lab=decodeURI(getParamer('lab'));
            var modelsend=decodeURI(getParamer('modelSend'));
            var vm=new Vue({
                el:"body",
                data:{
                    lab:lab,
                    modelsend:modelsend
                },
                methods:{
                   startdraw:function(type){
                       //默认的请求
                       var modelSend = jQuery.parseJSON(this.modelsend);
                       modelSend.dillName = this.lab;
                       modelSend.dillType=type;
                       if(type=='bar') {
                           //城市点位看板
                           var yearCityChart = new DRAWPATAITSTACK('http://39.107.58.193:8080/data-center/annualBoard/getAnnualBoardInfo?token='+sessionStorage.getItem("userId"),
                               modelSend,
                               'citydrillChart',
                               false,
                               '');
                           yearCityChart.draw();
                       }
                       else if(type=='cluster'){
                           //城市点位簇型图看板
                           var yearCityChart = new DRAWCROSSCLUSTER('http://39.107.58.193:8080/data-center/annualBoard/getAnnualBoardInfo?token='+sessionStorage.getItem("userId"),
                               modelSend,
                               'citydrillChart',
                               false
                               );
                           yearCityChart.draw();
                       }
                   }
                }});
            vm.startdraw('bar');

        });
        //方法获取浏览器的url中的参数
        function getParamer(paramer){
            var url=window.location.href.split("?")[1];
            if(url.indexOf("&")>0){
                urlParamArry=url.split("&");
                for(var i=0; i<urlParamArry.length; i++){
                    var paramerName=urlParamArry[i].split("=");
                    if(paramer==paramerName[0]){
                        return paramerName[1];
                    }
                }
            }else{
                var paramerValue=url.split("=")[1];
                return paramerValue;
            }
        }
    </script>
</body>
</html>